<template>
   <div>
      <el-button>点击watch</el-button>
      <Child :name="state.name" :age="state.age" @refresh="handleRefresh" />\
      <Child2 :name="child2State.name" :age="child2State.age" @submit="handleSubmit" ref="child2Ref" />
   </div>
</template>
<script setup lang="ts">
import { computed, onBeforeMount, onMounted, reactive, ref, watch, watchEffect } from 'vue';
import Child from './Child.vue'
import Child2 from './components/Child2.vue'
const state = ref({ name: 'dfd', age: 12 })
const child2Ref = ref()
const child2State = ref({
   name: 'child2',
   age: 1
})
onBeforeMount(() => {
})
onMounted(() => {
   console.log(`output->child2Ref`, child2Ref)
   child2Ref.value.childEvent()
})
const handleRefresh = (val: number) => {
   console.log('refresh')
   state.value.age = val
}
const handleSubmit = (val: number) => {
   child2State.value.age = val
}

</script>